<!--
  * 角色 数据范围
  *
  * @Author:    zhoujk
  * @Date:      2025-02-09 19:02
  *
-->
<template>
  <div>
    <a-row class="header">
      <a-col class="tab-margin" :span="4">业务单据</a-col>
      <a-col class="tab-data" :span="8">查看数据范围</a-col>
    </a-row>
    <div class="data-container">
      <a-row class="data">
        <a-col class="tab-margin" :span="4"> 数据权限 </a-col>
        <a-col class="tab-data" :span="8">
          <a-radio-group @change="updateDataScope" button-style="solid" v-model:value="dataScope">
            <a-radio v-for="item in $smartEnumPlugin.getValueDescList('ZZB_DATA_PERMISSION_ENUM')" :key="item.value" :value="item.value">
              {{ item.desc }}
            </a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script setup>
  import { message } from 'ant-design-vue'
  import _ from 'lodash'
  import { inject, onMounted, ref, watch } from 'vue'
  import { roleApi } from '/src/api/system/b-merchant/role-api'
  import { smartSentry } from '/src/lib/smart-sentry'

  const props = defineProps({
    value: Number,
  })

  defineEmits(['update:value'])

  // ----------------------- 显示 ---------------------------------

  let selectRoleId = inject('selectRoleId')
  let dataScope = ref([])
  let selectedDataScopeList = ref([])

  watch(
    () => selectRoleId.value,
    () => getRoleDataScope(),
  )

  onMounted(getRoleDataScope)

  // 获取数据范围根据角色id，并赋予选中状态
  async function getRoleDataScope() {
    let result = await roleApi.findOne({ id: selectRoleId.value })
    dataScope.value = result.data.dataPermission
  }

  // ----------------------- 数据范围更新 ---------------------------------
  // 更新
  async function updateDataScope() {
    try {
      let data = {
        id: selectRoleId.value,
        dataPermission: dataScope.value,
      }
      await roleApi.updateDataPermission(data)
      message.success('保存成功')
    } catch (e) {
      smartSentry.captureError(e)
    }
  }
</script>
<style scoped lang="less">
  .btn-group {
    text-align: right;
  }

  .button-style {
    margin: 0 10px;
  }

  .header {
    border-bottom: 1px solid #f2f2f2;
    font-weight: 600;
    margin: 10px 0px;
  }

  .tab-data {
    margin: 10px 0px;
  }

  .data-container {
    height: 380px;
    overflow-y: scroll;
  }

  .data {
    border-bottom: 1px solid #f2f2f2;
    margin: 10px 0px;
  }

  .radio-style {
    display: block;
    height: 30px;
    line-height: 30px;
  }

  .tab-margin {
    text-align: center;
    margin: 10px 0px;
  }

  .tab-desc {
    line-height: 30px;
    font-size: 16px;
    text-align: left;
  }
</style>
